<template>
  <div>
      <div class="sms-send-mobile">
          <div class="sms-mobile-body">
              <div class="sms-mobile-liu">
                  <span></span>
                  <span></span>
              </div>
              <div class="sms-mobile-head">
                  <span class="sms-mobile-head-left"><i class="el-icon-s-data"></i></span>
                  <span class="sms-mobile-head-right"><span>08:00</span></span>
              </div>
              <div class="sms-mobile-user">
                  <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=188149577,2949073731&fm=26&gp=0.jpg" alt="">
                  <div>1066254541245445</div>
              </div>
              <div class="sms-mobile-content">
                  【{{send_sign}}】{{send_content}}
              </div>
              <span class="sms-times">08:00</span>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    props:{ send_sign :{} , send_content: {} }
}
</script>

<style>
.sms-send-mobile{
  width: 300px;
  height: 600px;
  background: #000;
  border-radius: 20px;
  position: relative;
}
.sms-send-mobile::before{
    display: table;
    content: ''
}
.sms-mobile-body{
    width: 270px;
    height: 570px;
    margin: 15px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}
.sms-mobile-head{
    width: 100%;
    height: 20px;
    background: #8a70c6 ;
    line-height: 20px;
    overflow: hidden;
    padding: 0 10px;
    font-size: 12px;
    color: #fff;
}
.sms-mobile-head i{color: #fff;}
.sms-mobile-liu{
    position: absolute;
    width: 100px;
    height: 20px;
    background: #000;
    left:100px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius:20px;
    text-align: center;
}
.sms-mobile-head-left{
    float: left;
    color: #666;
}
.sms-mobile-head-right{
    float: right
}
.sms-mobile-user{
    background: #8a70c6 ;
    color: #fff;
    padding-bottom: 5px;
    padding-top:10px;
}
.sms-mobile-user > img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: block;
    margin: auto
}
.sms-mobile-user > div{
    text-align: center;
    font-size: 12px;
    color: #fff;
    margin:10px 0;
}
.sms-mobile-content{
    margin-top:10px;
    margin-left: 10px;
    font-size: 12px;
    max-width: 200px;
    padding:10px;
    background: #8a70c6;
    border-radius: 5px;
    line-height: 20px;
    color: #fff;
}
.sms-times{
    margin-left: 10px;
    font-size: 12px;
    color:#ccc;
}
.sms-mobile-liu > span{
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #666;
    border-radius: 5px;
}
.sms-mobile-liu > span:last-child{
    width: 40px;
    margin-left: 5px;
}
</style>